// $bgImg:var(--bg,url('@/assets/pageBg_0.png'));
$textShadow: var(--textShadow, 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #00a67c, 0 0 7px #00a67c);
$boxShadow: var(--boxShadow, rgba(25, 131, 224, 0.48) 3px 1px 8px 0px, rgba(25, 131, 224, 0.48) -3px -1px 8px 0px);
$boxHover: var(--boxHover, rgba(88, 143, 190, 0.48) 3px 1px 8px 0px, rgba(88, 143, 190, 0.48) -3px -1px 8px 0px);

#index {
  color: #d3d6dd;
  // width: 1920px;
  // height: 1080px;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  // transform: translate(-50%, -50%);
  // transform-origin: left top;

  .bg {
    width: 100%;
    height: 100%;
    // background-image: $bgImg;
    // background-size: cover;
    // background-position: center center;
  }

  .pointer {
    cursor: pointer;
  }

  .host-body {
    display: flex;

    .leftside {
      width: 96px;
      // height: 1080px;
      height: 100vh;
      background-color: rgba(31, 39, 51, 1);

      .logo {
        height: 80px;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.16);
        padding: 16px 24px 0px 24px;

        .logoImg {
          width: 48px;
          height: 48px;
          background-color: #fff;
          border-radius: 8px;
        }
      }

      .menu {
        padding-top: 10px;
        text-align: center;

        .menuInfo {
          margin: 24px auto;
          cursor: pointer;

          .menuIcon {
            width: 48px;
            height: 48px;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 12px 12px 12px 12px;
            opacity: 1;
            position: relative;
            margin: auto;
            margin-bottom: 8px;
          }

          .menuName {
            height: 16px;
            font-size: 12px;
            // font-family: Alibaba-PuHuiTi-Medium, Alibaba-PuHuiTi;
            font-weight: 500;
            color: rgba(220, 230, 245, 0.3);
            line-height: 16px;
            -webkit-background-clip: text;
          }

          .selected {
            color: rgba(49, 167, 245, 1);
          }
        }

        .menuInfo:hover {
          .menuIcon {
            scale: 1.1;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 12px 12px 12px 12px;
            box-shadow: rgba(88, 143, 190, 0.48) 3px 1px 8px 0px, rgba(88, 143, 190, 0.48) -3px -1px 8px 0px;
          }

          .menuName {
            color: rgba(49, 167, 245, 0.5);
          }
        }
      }
    }

    .rightside {
      position: relative;
      flex: 1;
      // height: 1080px;
      height: 100vh;

      .header {
        position: relative;
        // background: rgba(36,42,51,0.3);
        // border-radius: 0px 0px 0px 0px;
        // border-bottom: 1px solid rgba(255,255,255,0.16);
        z-index: 12;
        .title {
          padding-top: 8px;
          .main {
            font-size: 40px;
            font-family: PangMenZhengDao, PangMenZhengDao;
            font-weight: 400;
            line-height: 40px;
            letter-spacing: 4px;
            text-shadow: 0px 4px 8px rgba(4,56,102,0.3);
            background: linear-gradient(180deg, #FFFFFF 0%, #CCE7FF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
          }
          .overturn {
            font-size: 40px;
            font-family: PangMenZhengDao, PangMenZhengDao;
            font-weight: 400;
            line-height: 40px;
            letter-spacing: 4px;
            filter: blur(2px);
            background: linear-gradient(180deg,rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transform: scaleY(-1);
          }
        }

        .tabs {
          // width: 656px;
          height: 32px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 16px 16px 16px 16px;
          opacity: 1;
          position: fixed;
          top: 24px;
          left: 50%;
          transform: translateX(-50%);

          div:first-child {
            margin-left: 0;
          }

          div:last-child {
            margin-right: 0;
          }

          .tabItem {
            display: flex;
            align-items: center;
            margin: 0 16px;
            border-radius: 16px 16px 16px 16px;
            opacity: 1;
            padding: 0px 16px;
          }

          .tabActive {
            background: #317FF5;
          }
        }

        .topLeft {
          position: relative;
          top: 10%;
          left: 2%;
          padding: 0 10px;

          .dateDay {
            font-size: 32px;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 32px;
            -webkit-background-clip: text;
            margin-right: 4px;
          }

          .weather {
            margin-right: 16px;
          }
        }

        .topRight {
          position: relative;
          top: 10%;
          right: 2%;
          padding: 0 10px;

          .user {
            margin-right: 16px;
          }

          .img {
            width: 32px;
            height: 32px;
            background: rgba(0, 0, 0, 0.01);
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            margin-right: 8px;
          }
        }
      }

      .content {
        position: relative;
        z-index: 12;
        // height: calc(100vh - 80px);
      }

      .footerBar {
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 12;
        height: 72px;
      }

      .shadow {
        position: absolute;
        top: -1px;
        left: -1px;
        bottom: -1px;
        right: -1px;
        z-index: 11;
        pointer-events: none; //23, 102, 164, 0.6
        background-image: radial-gradient(60% 100% ellipse at 50%, rgba(255, 255, 255, 0) 50%, rgba(10, 35, 51, 0.8) 90%);
      }
    }
  }

  .arrowD {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    font-size: 0;
    line-height: 0;
  }

  .arrowU {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    font-size: 0;
    line-height: 0;
  }

  .chart {
    width: 440px;

    .chartTitle {
      height: 24px;
      font-size: 24px;
      font-family: PangMenZhengDao-Regular, PangMenZhengDao;
      font-weight: 400;
      color: #EBEFF5;
      line-height: 24px;
      -webkit-background-clip: text;
    }

    .subTitle {
      height: 24px;
      font-size: 20px;
      font-family: Alibaba-PuHuiTi-Medium, Alibaba-PuHuiTi;
      font-weight: 500;
      color: #EBEFF5;
      line-height: 24px;
      -webkit-background-clip: text;
    }

    .chartSelect {
      padding: 0 8px;
      margin-left: auto;
      height: 24px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .chartStatistic {
      width: 100%;
      padding: 8px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 12px 12px 12px 12px;
      opacity: 1;

      .statisticTitle {
        height: 20px;
        font-size: 14px;
        font-family: Alibaba-PuHuiTi-Medium, Alibaba-PuHuiTi;
        font-weight: 500;
        color: #EBEFF5;
        line-height: 20px;
        -webkit-background-clip: text;
      }

      .statisticIcon {
        border-radius: 8px;
        width: 40px;
        height: 40px;
      }

      .statisticAnalysis {
        margin-left: auto;

      }
    }

    .description {
      font-size: 12px;
      font-family: Alibaba-PuHuiTi-Medium, Alibaba-PuHuiTi;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      line-height: 16px;
      -webkit-background-clip: text;
    }

    .lump {
      width: 16px;
      height: 8px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
    }

    .searchInput {
      height: 24px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 12px 12px 12px 12px;
      opacity: 1;
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 0 8px;

      .inputPre {
        font-size: 14px;
        font-family: Alibaba-PuHuiTi-Regular, Alibaba-PuHuiTi;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.3);
        line-height: 20px;
        -webkit-background-clip: text;
      }
    }

    .chartTable {
      width: 432px;
      height: 304px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 12px 12px 12px 12px;
      opacity: 1;
    }

    .carousel {
      .carouselImg {
        height: 118px;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
      }
    }
  }

  .leftContent {
    position: absolute;
    top: 0;
    left: 24px;
    // height: calc(100vh - 160px);
  }

  .rightContent {
    position: absolute;
    top: 0;
    right: 24px;
    // height: calc(100vh - 160px);
  }

  .icons {
    padding: 8px;
    background: rgba(20,69,102,0.45);
    height: min-content;
    .iconInfo {
      .icon {
        width: 16px;
        height: 16px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        margin-right: 8px;
      }
      .name {
        font-size: 12px;
        font-family: Alibaba-PuHuiTi-Medium, Alibaba-PuHuiTi;
        font-weight: 500;
        color: #ebeff5;
        line-height: 16px;
        -webkit-background-clip: text;
      }
    }
  }
  .icons > :not(:last-child){
    margin-bottom: 8px;
  }

  .glass {
    background: hsla(0, 0%, 100%, .08);
    border-radius: 20px;
    position: relative;
    z-index: 20;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .footer {
    height: 44px;
    background: rgba(31, 96, 153, 0.6);
    border-radius: 24px 24px 24px 24px;
    opacity: 1;
    position: fixed;
    z-index: 20;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);

    .bar {
      height: 44px;
      display: flex;
      align-items: center;
      padding: 0 12px;

      .year {
        margin-right: 16px;
        padding: 4px 8px;
        height: 24px;
        background: rgba(138, 187, 229, 1);
        border-radius: 12px 12px 12px 12px;
        opacity: 1;

        .icon {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }

      .slide {
        align-items: center;

        .slideImg {
          width: 20px;
          height: 20px;
        }

        .dates {
          max-width: 30vw;
          margin: 0 8px;
          text-align: center;

          .trackBar {
            margin-top: 4px;
            align-items: center;

            .track {
              width: 32px;
              height: 4px;
              background: rgba(0, 0, 0, 0.16);
              border-radius: 0px 0px 0px 0px;
              opacity: 1;
            }

            .btn {
              width: 8px;
              height: 8px;
              background: #FFFFFF;
              opacity: 1;
              border: 1px solid rgba(24, 142, 245, 0.6);
              border-radius: 50%;
            }

            .actived {
              background: #188EF5;
            }
          }

          .actived {
            color: #188EF5;
          }
        }
      }
    }
  }

  .datePicker {
    width: 120px;
  }

  .font-num-s{
    font-size: 12px;
    font-family: D-DIN-DIN, D-DIN-DIN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 16px;
  }

  .font-num-m{
    font-size: 24px;
    font-family: D-DIN-DIN, D-DIN-DIN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 24px;
  }

  .font-num{
    font-size: 32px;
    font-family: D-DIN-DIN, D-DIN-DIN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 32px;
  }

  .font-num-l{
    font-size: 40px;
    font-family: D-DIN-DIN, D-DIN-DIN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 48px;
  }

  .font-lan-s {
    font-size: 12px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 16px;
  }

  .font-lan-m {
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 20px;
  }

  .font-lan {
    font-size: 16px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 24px;
  }

  .font-lan-l {
    font-size: 20px;
    font-family: Alibaba-PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 26px;
  }

  .font-lan-gray-30 {
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(255,255,255,0.3);
    line-height: 20px;
  }

  .font-lan-gray-45 {
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    line-height: 20px;
  }

  .font-lan-gray-60 {
    font-size: 16px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    line-height: 24px;
  }

  .font-lan-gray-60-s {
    font-size: 12px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    line-height: 16px;
  }

  .font-lan-gray-60-m {
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    line-height: 20px;
  }

  .font-lan-gray-75 {
    font-size: 14px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    line-height: 20px;
  }
}